
<!-- 
    表单 選擇類 

    可用于 风险偏好 等

    @author yangjinlai 20200828

    slotFormSet 是初始表单配置项

    其中的beforeData 是初始表单的值（回显）

    selectList是表单点击后出现的选择项列表的数据

    params是表单基本配置项

    其中的 isRequired 表示此表单项是否为必填

    name 為當前表單類別  riskType-风险偏好

-->

<template v-slot="slotFormSet">

    <div class="item itemSelect">

        <!-- 必填项的* -->
        <span class="isRequired" v-if="slotFormSet.params.isRequired">*</span>

        <a class="mint-cell mint-field">
            <div class="mint-cell-left"></div>
            <div class="mint-cell-wrapper">
                <div class="mint-cell-title">
                    <span class="mint-cell-text">{{slotFormSet.params.label}}</span>
                </div> 
                <div class="mint-cell-value" @click="popupVisible=true">

                    <!-- 点击选择 -->
                    <span class='span placeholder' v-if="!val">请选择</span>
                    <!-- 点击选择 -->
                    <span class='span placeholder result' v-if="val">{{val}}</span>

                    <!-- 点击选择 -->
                    <!-- <span class='placeholder span'>请选择</span> -->
                     <!-- 右边的箭头 -->
                    <i class="iconfont icon-forward">&#xe664;</i>
                </div>
            </div> 
            <!-- <div class="mint-cell-right"></div> -->
        </a>

        <!-- 弹出层 -->
        <mt-popup v-model="popupVisible" position="bottom" class="mint-popup">
            <mt-picker :slots="selectList" @change="onValuesChange" ref="picker" :showToolbar="true">
                <mt-button @click="handleCel()" class="cel">取消</mt-button>
                <mt-button @click="handleSure()" class="sure">确认</mt-button>
            </mt-picker>
        </mt-popup>

    </div>

</template>

<script>

import Vue from 'vue'

//引入选择器
import { Popup } from 'mint-ui';
Vue.component(Popup.name, Popup);

import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);



export default {
    name: 'slotFormAge',
    props:{
        slotFormSet: { //表单默认配置
            type: Object
        },
    },
    data(){
        return {
            val: '' ,
            selectList: null,
            popupVisible: false,
        }
    },

    watch:{
        //监听val的变化，如果有变动，给父组件标识
        'val': function(newVal,oldVal){

            console.log('newVal', newVal)
            console.log('oldVal', oldVal)

            this.$parent.changeSelectVal( this.slotFormSet.params.name, newVal, oldVal)
            
        },

        //监听外部传参的变化
        'slotFormSet': {
          handler (newVal) {
            console.log( 11111111111111)
              this.val = newVal.beforeData
            },
          deep: true,
          immediate: true,
        },

        // 'slotFormSet.beforeData': function(newVal,oldVal){
        //     console.log('设置选择接口数据', newVal)
        //     this.val = newVal
        // },

        //监听外部传参的变化
        'slotFormSet.selectList': function(newVal,oldVal){
            console.log('设置选择 列表数据', newVal)
            this.selectList = newVal
        },
    },

    methods: {
        onValuesChange(picker, values) {
            if (values[0] > values[1]) {
                picker.setSlotValue(1, values[0]);
            }
        },

        //确定按钮
        handleSure(){
            //设置选中的值
            this.val = this.$refs.picker.getValues()[0]
            //关闭弹层
            this.popupVisible = false
        },

        //取消按钮
        handleCel(){
            //关闭弹层
            this.popupVisible = false
        }
     },
}
</script>
